<template>
  <div>
    <el-calendar v-model="value">
      <template slot="dateCell" slot-scope="{ data }">
        <div
          :class="data.isSelected ? 'is-selected' : ''"
          @click="calItem(data.day)"
        >
          <p>
            {{ data.day.split('-').slice(1).join('-') }}
            <br >
            <span
              :class="
                dealMyDate(data.day).grade == '紧急日程'
                  ? 'is-success'
                  : dealMyDate(data.day).grade == '一般日程'
                  ? 'is-common'
                  : 'is-danger'
              "
            >
              {{ dealMyDate(data.day).content }}
            </span>
          </p>
        </div>
      </template>
    </el-calendar>
    <el-dialog
      :title="editForm.day"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form
        @submit.native.prevent
        :ref="editForm"
        :model="editForm"
      >
        <el-form-item label="日程" prop="content">
          <el-input v-model="editForm.content"></el-input>
        </el-form-item>
        <el-form-item label="性质" prop="grade">
          <el-radio-group v-model="editForm.grade">
            <el-radio label="一般日程"></el-radio>
            <el-radio label="紧急日程"></el-radio>
            <el-radio label="重要日程"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogVisible = false
            add()
          "
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'CalendarSchedule',
  data() {
    return {
      value: new Date(),
      resDate: [
        { date: '2021-11-20', content: '放假', grade: '一般日程' },
        { date: '2021-11-22', content: '去交电费', grade: '紧急日程' },
        { date: '2021-11-16', content: '去学习vue', grade: '重要日程' }
      ],
      dialogVisible: false,
      rcdata: [],
      editForm: {
        content: '',
        day: '',
        grade: '一般日程'
      }
    }
  },
  methods: {
    calItem(day) {
      this.editForm.day = day
      this.rcdata = this.dealMyDate(day)
      this.editForm.content = this.rcdata.content
      this.editForm.grade = this.rcdata.grade
      this.dialogVisible = true
    },
    // 每日日程
    dealMyDate(day) {
      const len = this.resDate.length
      const res = []
      for (let i = 0; i < len; i++) {
        // eslint-disable-next-line eqeqeq
        if (this.resDate[i].date == day) {
          res.content = this.resDate[i].content
          res.grade = this.resDate[i].grade
          res.index = i
          break
        }
      }
      return res
    },
    handleClose(done) {
      done()
    },
    add() {
      var a = {
        date: this.editForm.day,
        content: this.editForm.content,
        grade: this.editForm.grade
      }

      if (this.rcdata.grade) {
        this.$set(this.resDate, this.rcdata.index, a)
      } else {
        this.resDate.push(a)
      }
    }
  }
}
</script>
<style>
  .calendar-day {
    text-align: center;
    color: #202535;
    line-height: 30px;
    font-size: 12px;
  }
  .is-selected {
    color: #f8a535;
    font-size: 10px;
    margin-top: 5px;
  }
  .is-success {
    color: #67c23a;
  }
  .is-danger {
    color: #f56c6c;
  }
  .is-common {
    color: #909399;
  }
</style>
